<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<meta http-equiv="content-language" content="pt-br" />
		<meta name="author" content="ejcm" />
		<meta name="keywords" content="ejcm" />
		
		<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		<!--
			$(document).ready(function(){
				$(".bloco").css({"border": "1px solid red", "width": "20%"});


				$("#animar").click(function(){
				  $("#bloco1").animate({ 
				    width: "70%",
				    opacity: 0.4,
				    marginLeft: "100px",
				    fontSize: "25", 
				    borderWidth: "10px",
				    color: "green",
				    align: "center"
				  }, 1500);
				});
				
				$("#duplicar").click(function(){
					  var clone = $(this).next().clone().html();
					  $(".duplicado:last").after('<div class="bloco duplicado">' + clone + '</div>');
					  $(".bloco").css({"border": "1px solid red", "width": "20%"});
				});

				$("#mudar").click(function(){
					$(this).next().css('background-color','green').height("100px");
				});

				$("#texto1").keyup(function(){
					var valorAtual = $(this).val();
					var tam = valorAtual.length;
					if(!isNaN(valorAtual[tam-1]))
					{
						$(this).val(valorAtual.substring(0, tam-1));
					}
				});
				
				$("#texto1").click(function(){
					var valorAtual = $(this).val();
					var valorDefault = "apenas letras";
					if(valorAtual == valorDefault)
					{
						$(this).val('');
					}
				});

				$("#variar").toggle(
			      function () {
			        	$(this).next().hide();
			        	$(this).val('Aparecer');
			        },
			        function () {
			        	$(this).next().show();
			        	$(this).val('Desaparecer');
			        }
			      );

				/*$("#variar").click(function(){
					$("#variar").next().toggle(1500, function(){
						if($("#variar").val() == "Desaparecer")
							$("#variar").val('Aparecer');
						else
							$("#variar").val('Desaparecer');
					});
				});*/
					
			});
		//-->
		</script>
		
		<title>Hello World</title>
	</head>
	<body>
		<form>
			<input type="button" id="animar" value="Animar" />
			<div id="bloco1" class="bloco">
				Trainees
			</div>
			<br />
			
			<input type="button" id="duplicar" value="Duplicar" />
			<div id="bloco2" class="bloco duplicado">
				Trainees
			</div>
			<br />
			
			<input type="button" id="mudar" value="Mudar" />
			<div id="bloco3" class="bloco">
				Trainees
			</div>
			<br />
			
			<input type="button" id="variar" value="Desaparecer" />
			<div id="bloco4" class="bloco">
				Trainees
			</div>
			<br />
			
			<input type="text" id="texto1" name="texto" value="apenas letras" />
		</form>
	</body>
</html>